<template>
    <div>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-menu-item
                v-for="(item,index) in navTwo"
                :key="index+'a'"
                @click="handleToPage(index)"
                :active-text-color="'#00796a'"
                :index="item"
            >
                <i :class="navIcon[index]"></i>
                <span slot="title">{{item}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default {
    props: {},
    data() {
        return {
            navTwo: ['招投标', '合同签订', '采购订单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
            navIcon: [
                'el-icon-s-opportunity',
                'el-icon-s-data',
                'el-icon-s-finance',
                'el-icon-s-data',
                'el-icon-s-marketing',
                'el-icon-s-management',
                'el-icon-s-shop',
            ],
            navRouter: ['/Bidding', '/signing', '/order', '/production', '/distribution', '/acceptance', '/assurance'],
            activeIndex2: '1',
        }
    },
    methods: {
        handleToPage(index) {
            this.$router.push(this.navRouter[index])
        },
        handleOpen() {},
        handleClose() {},
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        },
    },
}
</script>
<style lang="scss" scoped>
.el-menu {
    border: 1px solid #e6e6e6;
    padding-bottom: 20px;
    padding-top: 20px;
    font-size: 12px;
}
.el-menu-vertical-demo {
    width: 182px;
}
.el-menu-item.is-active {
    color: #00796a !important;
    font-weight: bold;
}
.el-menu-item,
.el-submenu__title {
    height: 42px !important;
    line-height: 42px !important;
}
</style>
